React Streaming: Progressiivne serveripoolne renderdamine optimeeritud kasutajakogemuse jaoks

Veebiarenduse maailmas on kiire ja reageeriva kasutajakogemuse pakkumine ülimalt tähtis. Kasutajad ootavad, et veebisaidid laaditaks kiiresti ja oleksid viivituseta interaktiivsed. React, populaarne JavaScripti teek kasutajaliideste loomiseks, pakub selle väljakutse lahendamiseks võimsat tehnikat nimega Streaming Server-Side Rendering (SSR). See artikkel süveneb React Streaming SSR-i kontseptsiooni, uurides selle eeliseid, rakendamist ja mõju veebisaidi jõudlusele ja kasutajakogemusele.

Mis on Server-Side Rendering (SSR)?

Traditsiooniline kliendipoolne renderdamine (CSR) hõlmab brauseri allalaadimist HTML-, JavaScript- ja CSS-faile ning seejärel sisu renderdamist kliendipoolselt. Kuigi see on paindlik, võib see lähenemisviis viia esialgse renderdamise viibimiseni, kuna kasutaja peab ootama, kuni kõik ressursid alla laaditakse ja JavaScript käivitatakse, enne kui ta sisu näeb. SSR seevastu renderdab Reacti komponendid serveris ja saadab täielikult renderdatud HTML-i kliendile. Selle tulemuseks on kiirem esialgne laadimisaeg, kuna brauser saab täielikult vormindatud HTML-i, mida saab kohe kuvada.

Traditsioonilise SSR-i piirangud

Kuigi traditsiooniline SSR pakub CSR-i ees märkimisväärset paranemist, on sellel omad piirangud. Traditsioonilises SSR-is tuleb kogu rakendus renderdada serveris, enne kui HTML-i kliendile saadetakse. See võib olla kitsaskoht, eriti keerukate rakenduste puhul, millel on mitu komponenti ja andmesõltuvust. Aeg esimese baidini (TTFB) võib olla kõrge, mis põhjustab kasutaja jaoks tajutavat aeglust.

Sisenege React Streaming SSR: progressiivne lähenemine

React Streaming SSR ületab traditsioonilise SSR-i piirangud, võttes kasutusele progressiivse lähenemise. Selle asemel, et oodata, kuni kogu rakendus serveris renderdatakse, jagab Streaming SSR renderdamisprotsessi väiksemateks tükkideks ja voogesitab need tükid kliendile, kui need kättesaadavaks saavad. See võimaldab brauseril sisu kuvamist palju varem alustada, parandades tajutavat jõudlust ja vähendades TTFB-d. Mõelge sellele kui restoranile, mis valmistab teie sööki etappide kaupa: eelroog serveeritakse kõigepealt, seejärel pearoog ja lõpuks magustoit, selle asemel, et oodata, kuni kogu söök on korraga valmis.

React Streaming SSR-i eelised

React Streaming SSR pakub veebisaidi jõudluse ja kasutajakogemuse jaoks palju eeliseid:

• Kiirem esialgne laadimisaeg: HTML-i tükkide kliendile voogesituse abil saab brauser sisu kuvamist palju varem alustada, mille tulemuseks on kiirem tajutav laadimisaeg ja parem kasutajate kaasamine.
• Parem aeg esimese baidini (TTFB): Streaming SSR vähendab TTFB-d, saates esialgse HTML-i tüki kohe, kui see on valmis, selle asemel, et oodata, kuni kogu rakendus renderdatakse.
• Täiustatud kasutajakogemus: Kiirem esialgne laadimisaeg toob kaasa parema kasutajakogemuse, kuna kasutajad ei pea ootama sisu ilmumist.
• Parem SEO: Otsingumootorid saavad sisu tõhusamalt roomata ja indekseerida, kuna HTML on serveris hõlpsasti kättesaadav.
• Progressiivne hüdreerimine: Streaming SSR võimaldab progressiivset hüdreerimist, kus kliendipoolne Reacti kood järk-järgult lisab sündmuste kuulajaid ja muudab rakenduse interaktiivseks, kui HTML-i tükke voogesitatakse.
• Parem ressursside kasutus: Renderdamisprotsessi väiksemateks tükkideks jagamise abil saab Streaming SSR parandada serveri ressursside kasutust.

Kuidas React Streaming SSR töötab

React Streaming SSR kasutab ReactDOMServer.renderToPipeableStream() API-t HTML-i tükkide voogesitamiseks kliendile. See API tagastab loetava voo, mida saab suunata serveri vastuseobjektile. Siin on lihtsustatud illustratsioon selle toimimisest:

1. Server saab lehe taotluse.
2. Server kutsub ReactDOMServer.renderToPipeableStream(), et renderdada Reacti rakendus vooguks.
3. Voog hakkab väljastama HTML-i tükke, kui Reacti komponendid renderdatakse.
4. Server suunab voo vastuseobjektile, saates HTML-i tükid kliendile.
5. Brauser saab HTML-i tükid ja hakkab neid järk-järgult kuvama.
6. Kui kõik HTML-i tükid on vastu võetud, hüdreerib brauser Reacti rakenduse, muutes selle interaktiivseks.

React Streaming SSR-i rakendamine

React Streaming SSR-i rakendamiseks vajate Node.js serverit ja Reacti rakendust. Siin on samm-sammuline juhend:

1. Seadistage Node.js server: Looge Node.js server, kasutades raamistikku nagu Express või Koa.
2. Installige React ja ReactDOMServer: Installige paketid react ja react-dom.
3. Looge Reacti rakendus: Looge Reacti rakendus komponentidega, mida soovite serveris renderdada.
4. Kasutage ReactDOMServer.renderToPipeableStream(): Kasutage oma serverikoodis ReactDOMServer.renderToPipeableStream() API-t, et renderdada oma Reacti rakendus vooguks.
5. Suunake voog vastuseobjektile: Suunake voog serveri vastuseobjektile, et saata HTML-i tükid kliendile.
6. Käsitlege vigu: Rakendage veakäsitlust, et tabada kõik renderdamisprotsessi ajal tekkivad vead.
7. Lisage hüdreerimiseks skriptisilt: Lisage HTML-i skriptisilt, et hüdreerida Reacti rakendus kliendipoolselt.

Näidiskoodilõik (serveripoolne):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Your React component

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Client-side entry point
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Sorry, something went wrong
');
    }
  });

  setTimeout(abort, 10000); // Optional: Timeout to prevent indefinite hanging
});

app.use(express.static('public')); // Serve static assets

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

Näidiskoodilõik (kliendipoolne - `client.js`):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

Näidis React App komponent (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Data loaded successfully!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // Simulate a loading delay
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Welcome to Streaming SSR!
      
This is a demonstration of React Streaming SSR.
      Loading...
}>